

<template>
    <view class="addService">

        <view class="topBg"></view>
        <view class="topBg1"></view>

         <view style="position:fixed;top:0;width:750rpx;z-index:1000;" class="needChangeBg" :class="{active:!!transFormHeight}" :style="{height: systemInfo.statusBarHeight + 'px'}"></view>

         <view class="slim_header d-flex a-center j-center needChangeBg" :class="{active:!!transFormHeight}"  style="z-index:1000;background:transparent;border-bottom:none;"  :style="{top: systemInfo.statusBarHeight + 'px'}">
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">添加服务</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
		</view>
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->

        <scroll-view
            :scroll-y="true"
            class="content2"
            :scroll-with-animation="true"
            :scroll-into-view="last"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)`,transform: `translateY(-${transFormHeight}px)` }"
        >
            <view class="slim_box" style="background:transparent;margin-top:-10rpx;">

                <view class="icon_row d-flex a-center j-between" @tap="goPick">
                    <text class="text">选择图标</text>
                    <view class="icon_box d-flex a-center">
                        <image class="img" :src="`/static/createCircle/${selectedIcon}-h.png`"></image>
                        <i class="icon icon-more-2"></i>
                    </view>
                </view>

                <view class="row d-flex a-center j-between" style="background:transparent;">
                    <text class="text">标题</text>
                    <input
                        style="width:500rpx"
                        class="inp"
                        :adjust-position="false"
                        placeholder-style="color:#ccc"
                        placeholder="一句话标题,15字以内"
                        v-model="titleText"
                        @input="checkTitle(30)"
                        type="text"
                    />
                </view>

                <view class="row noactive d-flex a-center j-between" style="background:transparent">
                    <text class="text">服务描述1</text>
                </view>

                <view class="sheet psr" style="background:transparent;" @tap="handelInp1focus">
                    <view v-if="!inp1Focus" class="psa" style="top:0;left:0;right:0;bottom:0;z-index:100;"></view>
                    <textarea class="stextarea" :adjust-position="false" :focus="inp1FocusStatu" @blur="handelInp1Blur" :auto-height="false" v-model="despText1" @input="checkDesp(140,1)"  placeholder="请输入服务描述,不超过60字" placeholder-style="color:#ccc" type="textarea"/>
                </view>
                <view class="row noactive d-flex a-center j-between" style="background:transparent">
                    <text class="text">服务描述2</text>
                </view>

                <view class="sheet psr" style="background:transparent;" @tap="handelInp2focus"> 
                    <view v-if="!inp2Focus" class="psa" style="top:0;left:0;right:0;bottom:0;z-index:100;"></view>
                    <textarea class="stextarea" :adjust-position="false" :focus="inp2FocusStatu" @blur="handelInp2Blur" :auto-height="false" v-model="despText2" @input="checkDesp(140,2)"  placeholder="请输入服务描述,不超过60字" placeholder-style="color:#ccc" type="textarea"/>
                </view>
                <view class="row noactive d-flex a-center j-between" style="background:transparent">
                    <text class="text">服务描述3</text>
                </view>

                <view class="sheet psr" style="background:transparent;" @tap="handelInp3focus">
                   <view v-if="!inp3Focus" class="psa" style="top:0;left:0;right:0;bottom:0;z-index:100;"></view>
                    <textarea class="stextarea" :adjust-position="false" :focus="inp3FocusStatu" @blur="handelInp3Blur" :auto-height="false" v-model="despText3" @input="checkDesp(140,3)"  placeholder="请输入服务描述,不超过60字" placeholder-style="color:#ccc" type="textarea"/>
                </view>
                <view class="row noactive d-flex a-center j-between" style="background:transparent">
                    <text class="text">服务描述4</text>
                </view>

                <view class="sheet psr" style="background:transparent;" @tap="handelInp4focus">
                    <view v-if="!inp4Focus" class="psa" style="top:0;left:0;right:0;bottom:0;z-index:100;"></view>
                    <textarea class="stextarea" :adjust-position="false" :focus="inp4FocusStatu" @blur="handelInp4Blur" :auto-height="false" v-model="despText4" @input="checkDesp(140,4)"  placeholder="请输入服务描述,不超过60字" placeholder-style="color:#ccc" type="textarea"/>
                </view>
            </view>

            <view  style="height:30rpx;"></view>
            <view id="last"></view>
        </scroll-view>


        <view class="bottom_box" :style="{transform: `translateY(-${transFormHeight}px)`}">
            <view class="history">
                <view class="title d-flex a-center">添加历史</view>
                <scroll-view :scroll-x="true" class="history_imgs">
                    <view class="d-flex a-center" style="gap:20rpx;">
                        <view class="icon_box d-flex a-center" v-for="item in historyList" @tap="selectedFromHistory(item)">
                            <image class="img" :src="`/static/createCircle/${item.photo}-h.png`"></image>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view v-if="!isEdit" class="btn" @tap="add">
                添加
            </view>
            <view v-if="isEdit" class="btn" @tap="edit">
                确认修改
            </view>
        </view>

    </view>
</template>

<script setup lang="ts">
import { ref, computed,reactive,nextTick } from "vue";
import { onReady, onShow, onLoad,onUnload,onPageScroll } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { addServiceHistory,getService } from "@/api/api";

import { config as configStore } from "@/store/config";

const inp1Focus = ref(false);
const inp2Focus = ref(false);
const inp3Focus = ref(false);
const inp4Focus = ref(false);
const inp1FocusStatu = ref(false);
const inp2FocusStatu = ref(false);
const inp3FocusStatu = ref(false);
const inp4FocusStatu = ref(false);
const last = ref('');

const initFoucs = ()=>{
    inp1Focus.value = false;
    inp2Focus.value = false;
    inp3Focus.value = false;
    inp4Focus.value = false;
    inp1FocusStatu.value = false;
    inp2FocusStatu.value = false;
    inp3FocusStatu.value = false;
    inp4FocusStatu.value = false;
}

const handelInp4focus = ()=>{
    last.value ="last";
    nextTick(()=>{
        inp4Focus.value = true;
        setTimeout(()=>{
            inp4FocusStatu.value = true;
        },300)
    })
}

const handelInp3focus = ()=>{
    nextTick(()=>{
        inp3Focus.value = true;
        setTimeout(()=>{
            inp3FocusStatu.value = true;
        },300)
    })
}
const handelInp2focus = ()=>{
    nextTick(()=>{
        inp2Focus.value = true;
        setTimeout(()=>{
            inp2FocusStatu.value = true;
        },300)
    })
}
const handelInp1focus = ()=>{
    nextTick(()=>{
        inp1Focus.value = true;
        setTimeout(()=>{
            inp1FocusStatu.value = true;
        },300)
    })
}

const handelInp4Blur = ()=>{
    last.value ="";
    console.log('handelInp4Blur')
    inp4Focus.value = false;
    inp4FocusStatu.value = false;
}

const handelInp3Blur = ()=>{
    last.value ="";
    console.log('handelInp3Blur')
    inp3Focus.value = false;
    inp3FocusStatu.value = false;
}
const handelInp2Blur = ()=>{
    last.value ="";
    console.log('handelInp2Blur')
    inp2Focus.value = false;
    inp2FocusStatu.value = false;
}
const handelInp1Blur = ()=>{
    last.value ="";
    console.log('handelInp1Blur')
    inp1Focus.value = false;
    inp1FocusStatu.value = false;
}

onPageScroll(()=>{
    handelScroll();
})


const handelScroll = ()=>{
    try {
        uni.hideKeyboard();
    } catch (error) {
        
    }
}

const goBack = () => {
    uni.navigateBack();
};

const goPick = () => {
    uni.navigateTo({
        url: `/pages/quanzi/pickServiceIcon?selectedIcon=${selectedIcon.value}`,
    });
};

const transFormHeight = computed(()=>{

    if(inp1Focus.value){
        return 0;
    }
    if(inp2Focus.value){
        return 0;
    }
    if(inp3Focus.value){
        return 100;
    }
    if(inp4Focus.value){
        return 200;
    }

    return 0;

})


const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();

const bool = ref(false);
const selectedIcon = ref('10004');

const handleChange = (b:boolean) =>{
    bool.value = b;
}

const selectedIconChange = (iconId:string)=>{
    selectedIcon.value = iconId;
}

const navTitle = ref('添加服务')
const titleText = ref('')
const despText1 = ref('')
const despText2 = ref('')
const despText3 = ref('')
const despText4 = ref('')

    
const checkTitle = (maxLength:number)=>{
    let content = titleText.value.trim();
    let str = ''
    let len=0;
    for(var i=0; i<content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len+=2;
        } else {
            len++;
        }

        if(len<=maxLength){
            str+=content[i];
        }
    }
    nextTick(() => {
        titleText.value = str;
    })
}



const checkDesp = (maxLength:number,index:number)=>{
    let content = '';
    if(index===1){
        content = despText1.value.trim();
    }
    if(index===2){
        content = despText2.value.trim();
    }
    if(index===3){
        content = despText3.value.trim();
    }
    if(index===4){
        content = despText4.value.trim();
    }



    let str = ''
    let len=0;
    for(var i=0; i<content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len+=2;
        } else {
            len++;
        }

        if(len<=maxLength){
            str+=content[i];
        }
    }
    nextTick(() => {

        if(index===1){
            despText1.value = str;
        }
        if(index===2){
            despText2.value = str;
        }
        if(index===3){
            despText3.value = str;
        }
        if(index===4){
            despText4.value = str;
        }

    })
}

let addLoading = false;

const historyList = ref([]);

const getServiceHistory = async()=>{
    const res:any =await getService({userId:userData.id});
    const {flag,data} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "获取服务历史失败",
            duration: 1500,
        });
        return

    }
    historyList.value = data.list;
    console.log('getServiceHistory')
    console.log(res)
}

const selectedFromHistory = (historyItem:any)=>{
    titleText.value=historyItem.title;
    selectedIcon.value=historyItem.photo;
    const arr = historyItem.detail.split('&*&*&');
    despText1.value=arr[0]||'';
    despText2.value=arr[1]||'';
    despText3.value=arr[2]||'';
    despText4.value=arr[3]||'';
}

const add = async()=>{
    if(addLoading){
        return
    }
    addLoading = true;

    if(!titleText.value){
        uni.showToast({
            icon: "none",
            title: "请输入标题",
            duration: 1500,
        });
        addLoading = false;
        return
    }

    if(!selectedIcon.value){
        uni.showToast({
            icon: "none",
            title: "请选择图标",
            duration: 1500,
        });
        addLoading = false;
        return
    }

    if(!despText1.value&&!despText2.value&&!despText3.value&&!despText4.value){
        uni.showToast({
            icon: "none",
            title: "请至少输入一条服务描述",
            duration: 1500,
        });
        addLoading = false;
        return
    }
    const arr = [];
    if(despText1.value){
        arr.push(despText1.value)
    }
    if(despText2.value){
        arr.push(despText2.value)
    }
    if(despText3.value){
        arr.push(despText3.value)
    }
    if(despText4.value){
        arr.push(despText4.value)
    }

    const str = arr.join('&*&*&');

    const params:any = {
        userId:userData.id,
        title:titleText.value,
        photo:selectedIcon.value,
        detail:str,
    }

    const res:any = await addServiceHistory(params);
    const {flag} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "添加服务历史失败,请稍后再试",
            duration: 1500,
        });
        addLoading = false;
        return
    }
    params.id = new Date().getTime();

    uni.$emit('addService',params);
    goBack();
}

const edit = async()=>{
    if(addLoading){
        return
    }
    addLoading = true;

    if(!titleText.value){
        uni.showToast({
            icon: "none",
            title: "请输入标题",
            duration: 1500,
        });
        addLoading = false;
        return
    }

    if(!selectedIcon.value){
        uni.showToast({
            icon: "none",
            title: "请选择图标",
            duration: 1500,
        });
        addLoading = false;
        return
    }

    if(!despText1.value&&!despText2.value&&!despText3.value&&!despText4.value){
        uni.showToast({
            icon: "none",
            title: "请至少输入一条服务描述",
            duration: 1500,
        });
        addLoading = false;
        return
    }

     const arr = [];
    if(despText1.value){
        arr.push(despText1.value)
    }
    if(despText2.value){
        arr.push(despText2.value)
    }
    if(despText3.value){
        arr.push(despText3.value)
    }
    if(despText4.value){
        arr.push(despText4.value)
    }

    const str = arr.join('&*&*&');

    const params:any = {
        userId:userData.id,
        title:titleText.value,
        photo:selectedIcon.value,
        detail:str,
    }

    const res:any = await addServiceHistory(params);
    const {flag} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "添加服务历史失败,请稍后再试",
            duration: 1500,
        });
        addLoading = false;
        return
    }
    params.id = editService.value.id;
    uni.setStorageSync('editService',null);
    uni.$emit('editService',params);
    goBack();
}

const editService:any = ref({})


onReady(() => {});

onLoad((option: any) => {
    if(option.type==='edit'){
        navTitle.value =  '编辑服务';
        isEdit.value = true;
        editService.value = JSON.parse(uni.getStorageSync('editService'))
        titleText.value=editService.value.title;
        selectedIcon.value=editService.value.photo;
        const arr = editService.value.detail.split('&*&*&');
        despText1.value=arr[0]||'';
        despText2.value=arr[1]||'';
        despText3.value=arr[2]||'';
        despText4.value=arr[3]||'';

    }
    uni.$on('selectedIconChange',selectedIconChange)
    getServiceHistory();
});

const isEdit = ref(false);

onUnload(() => {
    uni.$off('selectedIconChange',selectedIconChange)
});

onShow(() => {});
</script>

<style lang="scss" scoped>

.needChangeBg{
    transition:all linear .3s;
    background:transparent !important;
    &.active{
        background:#23e2a6 !important;
    }
}

.addService{
    width:750rpx;
    height:100vh;
    background:#fff;



    .topBg{
        position:fixed;
        width:750rpx;
        height: 555rpx;
        background: linear-gradient(27deg, #D6F6FC 0%, #EAFCE1 59%, #B2FACD 100%);
    }
    .topBg1{
        position:fixed;
        top:150rpx;
        left:0;
        width:750rpx;
        height:500rpx;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    }

    .content2{
        position:fixed;
        width:750rpx;
        left:0;
        right:0;
        transition: all ease .3s;
        bottom: calc(constant(safe-area-inset-bottom) + 360rpx);
        bottom: calc(env(safe-area-inset-bottom) + 360rpx);
        .icon_row{
            width:100%;
            height:130rpx;
            padding:0 30rpx;
            &:active{
                background:#f5f5f5;
            }
            .icon_box{
                height:150rpx;
                .img{
                    width:150rpx;
                    height:150rpx;
                }
                .icon-more-2{
                    color:#CECECE;
                }
            }
        }
        .row{
            height:80rpx;
        }
        .sheet{
            padding-top:0;
            padding-bottom:0;
        }
        .stextarea{
            width:670rpx;
            height:126rpx;
            background:#f5f5f5;
            padding:10rpx 20rpx;
            font-size:28rpx;
            line-height:34rpx;
            
        }
    }
    .bottom_box{
        position:fixed;
        width:750rpx;
        height:360rpx;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        padding-bottom:30rpx;
        transition: all ease .3s;
        transform: translateY(0);
        .history{
            width:710rpx;
            height:250rpx;
            margin:0 auto;
            background:#fff;
            border-radius: 20rpx;
            margin-bottom:30rpx;
            padding:0 25rpx;
            .title{
                height:80rpx;
                color:#666;
            }

            .history_imgs{
                height:130rpx;
                width:660rpx;
            }

            .icon_box{
                width:120rpx;
                height:120rpx;
                border:1px dashed #CECECE;
                border-radius: 20rpx;
                .img{
                    width:120rpx;
                    height:120rpx;
                }
            }
        }
        .btn{
            width: 690rpx;
            height: 80rpx;
            text-align: center;
            line-height:80rpx;
            background: linear-gradient(318deg, #64F1C5 0%, #29DBA3 100%);
            border-radius: 20rpx;
            color:#fff;
            margin:0 auto;
            &:active{
                opacity: .7;
            }
        }
    }

}
</style>
